@keyframes nav-menu-from-right {
  from {
    transform: translate3d(200px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes nav-menu-from-left {
  from {
    transform: translate3d(-200px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes nav-menu-to-right {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(200px, 0, 0);
    opacity: 0;
  }
}

@keyframes nav-menu-to-left {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(-200px, 0, 0);
    opacity: 0;
  }
}

@keyframes nav-menu-scale-in {
  from {
    transform: rotateX(-30deg) scale(0.9);
    opacity: 0;
  }
  to {
    transform: rotateX(0deg) scale(1);
    opacity: 1;
  }
}

@keyframes nav-menu-scale-out {
  from {
    transform: rotateX(0deg) scale(1);
    opacity: 1;
  }
  to {
    transform: rotateX(-10deg) scale(0.95);
    opacity: 0;
  }
}

@keyframes nav-menu-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes nav-menu-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
